<!DOCTYPE HTML>
<head>
<script type="text/javascript">

var ancho;
var alto;

function retornarLienzo(x)
{
   var canvas = document.getElementById(x);
   if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
   ancho=canvas.width;
   alto=canvas.height;
   if (canvas.getContext) 
   {
     var lienzo = canvas.getContext("2d");   
     return lienzo;
   }
   else
     return false;
}
var j=0;
var ini;

function inicio() {
  ini=setInterval(dibujar,3000);
}

function dibujar() {

  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
	lienzo.fillStyle="rgb(0,0,0)";
	lienzo.fillRect(0,0,ancho,alto);
	lienzo.strokeStyle = "rgb(255,255,255)";
	lienzo.lineWidth=8;
    var img = new Array(20);
    var im0=gup("i0");
    var im1=gup("i1");
    var im2=gup("i2");
    var im3=gup("i3");
    var im4=gup("i4");
    var im5=gup("i5");
    var im6=gup("i6");
    var im7=gup("i7");
    var im8=gup("i8");
    var im9=gup("i9");
    var im10=gup("i10");
    var im11=gup("i11");
    var im12=gup("i12");
    var im13=gup("i13");
    var im14=gup("i14");
    var im15=gup("i15");
    var im16=gup("i16");
    var im17=gup("i17");
    var im18=gup("i18");
    var im19=gup("i19");
    
    img[0]= new Image();
    img[0].src= im0;
    img[1]= new Image();
    img[1].src= im1;
    img[2]= new Image();
    img[2].src= im2;
    img[3]= new Image();
    img[3].src= im3;
    img[4]= new Image();
    img[4].src= im4;
    img[5]= new Image();
    img[5].src= im5;
    img[6]= new Image();
    img[6].src= im6;
    img[7]= new Image();
    img[7].src= im7;
    img[8]= new Image();
    img[8].src= im8;
    img[9]= new Image();
    img[9].src= im9;
    img[10]= new Image();
    img[10].src= im10;
    img[11]= new Image();
    img[11].src= im11;
    img[12]= new Image();
    img[12].src= im12;
    img[13]= new Image();
    img[13].src= im13;
    img[14]= new Image();
    img[14].src= im14;
    img[15]= new Image();
    img[15].src= im15;
    img[16]= new Image();
    img[16].src= im16;
    img[17]= new Image();
    img[17].src= im17;
    img[18]= new Image();
    img[18].src= im18;
    img[19]= new Image();
    img[19].src= im19;
	
  //document.write(im1);
	var mitadAncho=ancho/2;
	var mitadAlto=alto/2;

    img[j].onload = function(){ 
	    var tamAncho=img[j].width;
    	var tamAlto=img[j].height;
      
      if(tamAncho>tamAlto){
        var maxW=500;
        var maxH=0;
        ratio=tamAncho/maxW;
        img[j].width=maxW;
        img[j].height=img[j].height/ratio;
        maxH=img[j].height;
      }

      else {
        var maxW=0;
        var maxH=500
        ratio=tamAlto/maxH;
        img[j].height=maxH;
        img[j].width=img[j].width/ratio;
        maxW=img[j].width;   
      }

      tamAncho=img[j].width;
      tamAlto=img[j].height;
      
    	var temp1=mitadAncho-(tamAncho/2);
    	var temp2=mitadAlto-(tamAlto/2);

      lienzo.strokeRect(temp1,temp2,maxW,maxH);
      lienzo.drawImage(img[j], temp1, temp2, maxW,maxH);   
      j=j+1;
    }
      if (j==20)
      clearInterval(ini); 
  }   
}

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

</script>

</head>
<body onLoad="inicio()">
<canvas id="lienzo1">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>